import React from "react";
import {Link} from "react-router";
import {Table, Card, Menu, Dropdown, Icon, Modal, message, Button, Row, Col} from 'antd';
import BreadcrumbCustom from "../BreadcrumbCustom";
import App from "../../common/App.jsx";
import U from "../../utils";
import "../../assets/css/Admin/admins.less";

// 接口
const URL = {
    list: 'adm/admin/list',
    remove: 'adm/admin/remove', 
    updatePassword: 'adm/admin/reset_password',
    key: 'adminId',
    edit: 'app/admin/edit/',
    add: 'app/admin/edit/0',
};
export default class Admins extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            dataSource: [],
            pagination: {pageSize: 10, current: U.page.getCurrentPage(), total: 0},
            columns: [
                {
                    title: "名称",
                    dataIndex: "nick",
                    key: "nick",
                },
                {
                    title: "邮箱",
                    dataIndex: "email",
                    key: "email"
                },
                {
                    title: "创建时间",
                    dataIndex: "createdAt",
                    key: "createdAt",
                    render: (createdAt) => <span>{U.date.format(createdAt, 'yyyy-MM-dd HH:mm:ss')}</span>
                },
                {
                    title: "操作",
                    dataIndex: "option",
                    key: "option",
                    width: 200,
                    render: (col, record, i) => (
                        <Dropdown overlay={<Menu>
                            <Menu.Item key="0">
                                <a href="javascript:;" onClick={() => {
                                    Modal.confirm({
                                        title: '删除',
                                        onOk: () => {
                                            App.api(URL.remove, {
                                                [URL.key]: record.id,
                                            }).then(() => {
                                                message.success('删除成功');
                                                this.loadData();
                                            })
                                        }
                                    })
                                }}>删除</a>
                            </Menu.Item>
                            <Menu.Item key="1">
                                <a href="javascript:;" onClick={() => {
                                    // 重置密码
                                }}>重置密码</a>
                            </Menu.Item>
                        </Menu>} trigger={['click']}>
                            <a className="ant-dropdown-link" href="javascript:;">
                                操作 <Icon type="down"/>
                            </a>
                        </Dropdown>
                    )
                }
            ]
        };
    }


    componentDidMount() {
        this.loadData();
    }


    loadData = () => {
        let _this = this;
        _this.setState({loading: true});
        let p = _this.state.pagination;
        App.api(URL.list, {
            countTotal: true,
            offset: (this.state.pagination.current - 1) * (this.state.pagination.pageSize),
            limit: p.pageSize
        }).then(function (result) {
            let pager = U.pager.convertOffset2Page(result);
            pager.current = p.current;
            _this.setState({
                dataSource: result.items,
                pagination: pager,
                loading: false
            });
        });
    };


    handleTableChange = (pagination) => {
        this.setState({
            pagination: pagination
        }, () => this.loadData());
    };

    render() {
        const {columns, dataSource, pagination:{total, pageSize, offset, current}} = this.state;

        const pagination = {
            total: total,
            current,
            pageSize: pageSize,
            showSizeChanger: true
        };
        return (
            <div>
                {/* <BreadcrumbCustom first="系统管理员" second=""/> */}
                <div style={{margin:'24px',backgroundColor:'#fff'}}>
                    <div className='admins-top'>
                        <p className='admin-title'>
                            <span className="admin-title-line"></span>
                            <span className="admin-title-span" >系统管理员</span>
                        </p>
                    </div>
                    <div>
                        <Button
                            style={{margin:'20px'}}
                            size={"large"}
                            type={"primary"}
                            onClick={() => {
                                this.props.router.push(URL.add);
                            }}
                        >
                            + 添加管理员
                        </Button>
                        <Table
                            rowKey={row => row.id}
                            columns={columns}
                            dataSource={dataSource}
                            pagination={pagination}
                            onChange={this.handleTableChange}
                            loading={this.state.loading}
                            scroll={{
                                x: columns
                                    .map(({width}) => width || 100)
                                    .reduce((l, f) => l + f)
                            }}
                        />
                    </div>
                </div>
            </div>
        );
    }
}
